<template>
  <TableBody>
    <template #header>
      <TableHeader ref="tableHeaderRef" :show-filter="false">
        <template #table-config>
          <AddButton @add="addItem">新增</AddButton>
        </template>
      </TableHeader>
    </template>
    <template #default>
      <a-table
        :bordered="false"
        :loading="table.tableLoading"
        :data="table.dataList"
        :pagination="false"
        table-layout-fixed
        :columns="tableColumns"
        :scroll="{ y: table.tableHeight.value }"
      >
        <template #userRole="{ record }">
          <a-tag color="blue" size="small">{{ getRole(record.userRole)?.roleName }}</a-tag>
        </template>
        <template #actions="{ record }">
          <a-button size="mini" class="mr-2" @click="onEditItem(record)">
            <template #icon>
              <icon-edit />
            </template>
            编辑
          </a-button>
          <DeleteButton status="danger" @delete="onDeleteItem(record)" size="mini"
            >删除</DeleteButton
          >
        </template>
      </a-table>
    </template>
    <template #footer>
      <TableFooter ref="tableFooterRef" :pagination="pagination" />
    </template>
  </TableBody>

  <AddUser v-model:visible="visible" v-model:user="selectUser" @doRefresh="doRefresh" />
</template>

<script lang="ts" setup name="UserList">
  import AddUser from './components/AddUser.vue'
  import { useUser } from './user.hook'
  import { useRole } from './role.hook'

  const { getRole, getRoles } = useRole()
  const {
    table,
    addItem,
    visible,
    selectUser,
    doRefresh,
    pagination,
    tableColumns,
    onEditItem,
    onDeleteItem,
  } = useUser()

  onMounted(async () => {
    getRoles()
  })
</script>
